<template>
  <div class="dashboard-container">
    <el-row :gutter="20" class="mb20">
      <el-col :span="8">
        <div class="item-box">
          <h3 class="item-title">本月现金流</h3>
          <div class="item-body"></div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="item-box">
          <h3 class="item-title">本月现金流</h3>
          <div class="item-body"></div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="item-box">
          <h3 class="item-title">本月现金流</h3>
          <div class="item-body"></div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="item-box">
          <h3 class="item-title">本月现金流</h3>
          <div class="item-body"></div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="item-box">
          <h3 class="item-title">本月现金流</h3>
          <div class="item-body"></div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="item-box">
          <h3 class="item-title">本月现金流</h3>
          <div class="item-body"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters([
      'name'
    ])
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    padding: 30px;
    background: #f5f7fa;
    .item-box {
      padding: 15px;
      height: 360px;
      background: #fff;
      box-shadow: 0 2px 0 0 #D0D4D9;
      .item-title {
        margin: 0;
        font-size: 16px;
      }
    }
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
